import React from 'react'
export default class Test extends React.Component {
  constructor() {
    super()
    // 定义状态
    this.state = {
      count: 1,
      msg: 'hello react',
    }
  }
  render() {
    return (
      <div>
        <p id="tip">{this.state.count}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            // 注意: setState修改数据的行为是异步的
            // this.setState({
            //   count: this.state.count + 1,
            //   msg: 'hello',
            // })
            // this.setState({
            //   count: this.state.count + 2,
            // })
            // this.setState({
            //   count: this.state.count + 3,
            // })
            // this.setState({
            //   count: this.state.count + 1,
            //   msg: 'hello',
            //   count: this.state.count + 2,
            //   count: this.state.count + 3,
            // })

            // this.setState((state) => {
            //   return {
            //     ...state,
            //     count: state.count + 1,
            //   }
            // })
            // this.setState((state) => {
            //   return {
            //     ...state,
            //     count: state.count + 2,
            //   }
            // })
            // this.setState((state) => {
            //   return {
            //     ...state,
            //     count: state.count + 3,
            //   }
            // })

            this.setState(
              {
                count: this.state.count + 1,
              },
              () => {
                // 当count数据修改完毕,并且页面更新完毕才会触发
                console.log(this.state.count)
                console.log(document.getElementById('tip').innerText)
              }
            )
          }}
        >
          +
        </button>
      </div>
    )
  }
}
